簡言

Flex 有多種方式可以讓你把資料置中，使用 Flex-grow 的延展特性來達成，這個例子中 Amos 使用了 flex-direction: column 直式排法，搭配 :before 偽元素使用 flex-grow 伸展值能夠取得剩下所有空間的特性，把他設定成一半的剩餘空間就能做到把內容資料準確的推到垂直中間位置，算是個傳統技法的延伸方式。（這樣的話上面第七個方式不是比較快？）

原理說明

此種垂直置中的方式，是利用 Flex-grow 的延展特性，如 Amos 第一次開始直播的影片-玩轉 CSS FLEX 中提到的，Flex-grow 是控制「主軸」的伸展，主軸的伸展控制又是利用該軸剩下的空間來做伸展，所以 Amos 就想到了我要垂直置中的話，不就是將直向空間中剩下的空間除以2就可以了嗎? 接著我要怎樣讓物件上方可以有一個占掉一半剩餘空間的狀態呢? 答案就是建立一個偽元素即可啦，Amos 建立了一個 ::before 物件，接著設定 flex-grow: 0.5讓它占掉剩餘空間的一半，這樣就完成了，如果你設定為1的話，它會把剩下的空間全部都占掉喔，要小心別設定錯了。
flex-grow 的特性是伸展，被設定了 flex-grow的物件，會將所在空間中剩下的空間拿來做分配，倘若該空間中有兩個物件都設定了 flex-grow:1的話，那麼剩下的空間就會被分成兩份給這兩個物件，倘若兩個物件中A物件被設定 flex-grow:1，B物件被設定 flex-grow:2的話，那麼剩下的空間會被分成三份(除以3的意思)，A物件佔1/3，B物件佔2/3，依此類推就是囉，是不是很簡單呢。

原始碼

HTML

<div class="box box8">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: '';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ccc;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位